<template>
  <div>

    <!------------------     聊天页面     ---------------->
    <div style="padding: 10px; margin-bottom: 50px">
      <el-row>
        <el-col :span="16">
          <div style="width: 800px; margin: 0 auto; background-color: white;
                    border-radius: 5px; box-shadow: 0 0 10px #ccc">
            <div style="text-align: center; line-height: 50px;">
              <span style="font-size: 30px">{{ patient.recordName }}&nbsp;</span>{{patient.recordSex}}&nbsp;{{patient.recordAge}}
            </div>
            <div style="height: 350px; overflow:auto; border-top: 1px solid #ccc" v-html="content"></div>
            <div style="height: 200px">
            <textarea v-model="text" style="height: 160px; width: 100%; padding: 20px; border: none; border-top: 1px solid #ccc;
             border-bottom: 1px solid #ccc; outline: none"></textarea>
              <div style="text-align: right; padding-right: 10px">
                <el-button type="primary" size="mini" @click="send">发送</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>

import {useRoute, useRouter} from "vue-router";
import useUserStore from '@/store/modules/user'
// import {
//   addPrescription,
//   findThisCharHistory,
//   findThisRecordByPatientId,
//   getDrugListByDrugName
// } from "@/api/doctor/receivePatients.js";
import {ElMessage} from "element-plus";

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const form = ref({})
const patient = ref({})
const prescriptionForm = ref({
  prescription: {
    'diagnosticResult': undefined,
    'patientId': undefined,
    'diagnosticDiseaseDescription': undefined
  },
  prescriptionDrugMiddleList: []
})
const drugList = ref([])

// 消息集
const messages = ref([])
// 当前发送人
const myId = ref()
// 消息
const text = ref()
// 消息集html
const content = ref([])
let socket

/** 根据id查找患者档案 */
function getRecordByPatientId() {
  prescriptionForm.value.prescription.patientId = route.query.id
  // findThisRecordByPatientId(route.query.patientId).then(res => {
  //   patient.value = res.data
  // })
}

/** 发送消息 */
function send() {
  if (!prescriptionForm.value.prescription.patientId) {
    ElMessage({type: 'warning', message: "请选择聊天对象"})
    return;
  }
  if (!text.value) {
    ElMessage({type: 'warning', message: "请输入内容"})
  } else {
    if (typeof (WebSocket) == "undefined") {
      console.log("您的浏览器不支持WebSocket");
    } else {
      console.log("您的浏览器支持WebSocket");
      // 组装待发送的消息 json
      // {"from": "zhang", "to": "admin", "text": "聊天文本"}
      let message = {from: myId.value, to: prescriptionForm.value.prescription.patientId, text: text.value}
      socket.send(JSON.stringify(message));  // 将组装好的json发送给服务端，由服务端进行转发
      messages.value.push({user: myId.value, text: text.value})
      // 构建消息内容，本人消息
      createContent(null, myId.value, text.value)
      text.value = '';
    }
  }
}

/** 构建聊天气泡 */
function createContent(remoteUser, nowUser, text) {  // 这个方法是用来将 json的聊天消息数据转换成 html的。
  let html
  // 当前用户消息
  if (nowUser) { // nowUser 表示是否显示当前用户发送的聊天消息，绿色气泡
    html = "<div class=\"el-row\" style=\"padding: 5px 0\">\n" +
        "  <div class=\"el-col el-col-22\" style=\"text-align: right; padding-right: 10px\">\n" +
        "    <div class=\"tip left\">" + text  + "    </div>\n" +
        "  </div>\n" +
        "  <div class=\"el-col el-col-2\">\n" +
        "  <span class=\"el-avatar el-avatar--circle\" style=\"height: 40px; width: 40px; line-height: 40px;\">\n" +
        "    <img src=\"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png\" style=\"object-fit: cover;\">\n" +
        "  </span>\n" +
        "  </div>\n" +
        "</div>";
  } else if (remoteUser) {   // remoteUser表示远程用户聊天消息，蓝色的气泡
    html = "<div class=\"el-row\" style=\"padding: 5px 0\">\n" +
        "  <div class=\"el-col el-col-2\" style=\"text-align: right\">\n" +
        "  <span class=\"el-avatar el-avatar--circle\" style=\"height: 40px; width: 40px; line-height: 40px;\">\n" +
        "    <img src=\"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png\" style=\"object-fit: cover;\">\n" +
        "  </span>\n" +
        "  </div>\n" +
        "  <div class=\"el-col el-col-22\" style=\"text-align: left; padding-left: 10px\">\n" +
        "    <div class=\"tip right\">" + text + "</div>\n" +
        "  </div>\n" +
        "</div>";
  }
  console.log(html)
  content.value += html;
}

/** 初始化长连接 */
function init() {
  let username = myId.value;
  if (typeof (WebSocket) == "undefined") {
    console.log("您的浏览器不支持WebSocket");
  } else {
    console.log("您的浏览器支持WebSocket");
    let socketUrl = "ws://localhost:9211/imserver/" + username;
    if (socket != null) {
      socket.close();
      socket = null;
    }
    // 开启一个websocket服务
    socket = new WebSocket(socketUrl);
    //打开事件
    socket.onopen = function () {
      console.log("websocket已打开");
    };
    //  浏览器端收消息，获得从服务端发送过来的文本消息
    socket.onmessage = function (msg) {
      console.log("收到数据====" + msg.data)
      let data = JSON.parse(msg.data)  // 对收到的json数据进行解析， 类似这样的： {"users": [{"username": "zhang"},{ "username": "admin"}]}
      // if (data.users) {  // 获取在线人员信息
      //   _this.users = data.users.filter(user => user.userId !== username)  // 获取当前连接的所有用户信息，并且排除自身，自己不会出现在自己的聊天列表里
      // } else {
      // 如果服务器端发送过来的json数据 不包含 users 这个key，那么发送过来的就是聊天文本json数据
      //  // {"from": "zhang", "text": "hello"}
      if (data.from === prescriptionForm.value.prescription.patientId) {
        messages.value.push(data)
        // 构建消息内容
        createContent(data.from, null, data.text)
      }
      // }
    };
    //关闭事件
    socket.onclose = function () {
      console.log("websocket已关闭");
    };
    //发生了错误事件
    socket.onerror = function () {
      console.log("websocket发生了错误");
    }
  }
}

/** 查找当前人与对方的全部聊天记录 */
// function findCharHistory() {
//   findThisCharHistory(route.query.patientId).then(res => {
//     console.log(res.data);
//     res.data.forEach(chatHistory => {
//       // 如果  from==myid 证明是“我”发送的
//       if(chatHistory.from == myId.value ) {
//         createContent(null, chatHistory.from, chatHistory.text)
//       }else{
//         // 对方发送的
//         createContent(chatHistory.from, null, chatHistory.text)
//       }
//
//     })
//   })
// }

myId.value = userStore.$state.id
getRecordByPatientId()
// findCharHistory()
init()
</script>

<style>

.tip {
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
  padding: 10px;
  width: auto;
  display: inline-block;
}

.right {
  background-color: deepskyblue;
}

.left {
  background-color: forestgreen;
}

.prescription {
  margin: 50px auto;
  width: 800px;
  position: relative;
  text-align: center;
}

</style>